<template>
  <div>
    <el-button type="primary" @click="willadd"> 添加</el-button>
    <!-- 表格 -->
    <!-- 点击边编辑出现弹框 -->
    <!-- 将list传递给list组件渲染数据 -->
    <v-list @willdeit="willedit" :list="list" @init="init"></v-list>
    <!-- 父传子让弹框消失  -->
    <v-form :info="info" :list="list" @init="init" ref="form"></v-form>
    <!-- 分页 -->
    <el-pagination
      layout="prev, pager, next"
      :total="total"
      :page-size="size"
      background
      @current-change="changePage"
    >
    </el-pagination>
  </div>
  <!-- <v-list></v-list> -->
</template>
<script>
import vList from "../manage/components/vList.vue";
import vForm from "../manage/components/vForm.vue";
import { mapGetters, mapActions } from "vuex";
import { requsercount, requserlist } from "../../http/api";

export default {
  props: [],
  components: {
    vList,
    vForm,
  },
  data() {
    return {
      // 为了让子组件能直接修改父组件的isshow所以传递的时候用对象赋值

      // isshow:false,
      // 对象info赋值的时候给的是地址
      info: {
        isshow: false,
        isadd: true,
      },
      list: [],
      //   一页的条目
      size: 2,
      total: 0,
      page: 1,
    };
  },
  computed: {
    ...mapGetters,
  },
  methods: {
    ...mapActions,

    // 点击添加this.isshow真
    //添加按钮
    willadd() {
      this.info.isshow = true;
      this.info.isadd = true;
    },
    // 点击编辑
    willedit(id) {
      this.info.isshow = true;
      this.info.isadd = false;
      // 调用子组件 .getone(id)方法完成修改
      this.$refs.form.getone(id);
    },
    
    init() {
        // 请求列表
         this.reqList() 
      //   总数
      requsercount().then((res) => {
        if (res.data.code == 200) {
          console.log(res);
          this.total = res.data.list[0].total;
        }
      });
    },
    // // 请求列表
    reqList() {
      requserlist({ page: this.page, size: this.size }).then((res) => {
        if ((res.data.code = 200)) {
            // 如果取回来的数据是空 当前的page又>1那么就取到上一页page-- 刷新页面 page《1就不用做
            let arr=res.data.list?res.data.list:[]
            if(arr.length==0&&this.page>1){
                this.page--
               this.reqList() 
               return;
            }
          this.list=arr
        }
      });
    },
    // 修改页码
    changePage(e) {
      console.log(e);
      this.page = e;
    //   从新刷新数据
       this.reqList() 
    },
  },
  mounted() {
    // 获取列表数据
    this.init();
  },
};
</script>
 <style lang="less" scoped>
@import "../../less/index.less";
.el-button {
  margin-bottom: @margin;
}
</style>

